<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>我叫{{ obj.name }}, 今年 {{obj.age }}岁了</p>
        <button @click="onClick">修改ref数据</button>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        //解构出createApp,ref函数
        const { createApp, ref } = Vue
        createApp({
            setup() {

                //定义一个响应式字符串
                const msg = ref('Hello World')

                //定义一个响应式对象
                const obj = ref({
                    name: 'vue',
                    age: 9
                })

                //点击事件
                const onClick=()=>{
                    //修改msg
                    msg.value='你好, Vue3'

                    //修改obj的name和age属性
                    obj.value.name='Vue3'
                    obj.value.age=11
                }

                return { msg, obj,onClick}
            }
        }).mount('#app')

    </script>

</body>

</html>